<!-- 表格插件::选择显示表格的每一列 -->
<!-- 
    <myColumn 
        :data="SelectColumnData" //动态绑定的 父组件表格数据 [{label:'标签',prop:'属性',show:true}]
        @ok='getAll' // 点击确定时 触发的事件 (selData)=> selData = [0,1]
        @select='console' //多选每一项时触发的事件 (selData)=> selData = [0,1,2]
        style="position:absolute;right:11px;top:1px;" //支持自定义 插件位置和样式
    ></myColumn>
 -->
<template>
    <div class="myColumn" ref='z2' z::init=' const ref = $this.$refs.myColumnInput;  ref.$el.style.opacity = 0; ref.$el.click(); ( ()=>{ ref.blur(), (()=>ref.$el.style.removeProperty("opacity")).sleep(300) } ).sleep(200);  '>

        <el-button 
            plain
            type=primary 
            size="mini" 
            style="width: 119px;position: relative;z-index: 99;right: -9px;height:29px;" @click.stop="showMenu">
            <i class="el-icon-arrow-down" style="margin-left: -5px;"></i>
            <!-- <i class="el-icon-caret-bottom" style="margin-left: -5px;"></i> -->
            {{ title||'选择显示列' }}
            <!-- <i class="el-icon-arrow-down" style="margin-left:3px;"></i> -->
            <el-tooltip effect="dark" :content="isShowMenu ? ( !selectPart ? '点击还原上一组' : '点击显示全部' ) : selData.length<data.length ? '已隐藏'+(data.length-selData.length)+'列' : '已显示全部'" placement="top">
                <el-checkbox :indeterminate="selectPart" v-model="selectAll" style="margin-left:3px;display: inline-block;" @change="selectAllCol"></el-checkbox>
            </el-tooltip>
        </el-button>

        <el-select v-model="selData" multiple placeholder="请选择" :popper-append-to-body="false" style="position: absolute;top: 12px;width: 120px;"
            ref="myColumnInput" id="myColumnInput" @visible-change=" close(arguments[0]); arguments[0] && !$1.selectHeight && $setView.sleep(200,'z0'); " change="selectEach">
            <div style="overflow:auto;width: 130px;" id="selectHeight" ref='z0' z::once=' const h = $this.selectHeight=@offsetHeight; const H = window.innerHeight * 0.4;
                @style.height = ( H > h ? h : H ) + "px"; ' >
                <el-option v-for="(item,index) in data" :key="index" :label="item.label" :value="index" @click.native='selectEach(item,index)' attr-class='console.warn(@)'>
                    <span style="float: left">{{ item.label }}</span>
                </el-option>
            </div>

            <div style="text-align: center;margin: 5px auto;">
                <el-button type=primary icon="el-icon-check" size="mini" @click="ok()" id="mySearch"
                    style="height:26px;width:85px;">确定</el-button>
            </div>
        </el-select>
    </div>
</template>
<script>
    export default {
        ref: true,
        global: false,
        name: 'myColumn',
        data: function () {
            return {
                isShowMenu: false,
                selectPart: false,
                selectAll: true,
                selData: [],
            }
        },
        props: ["title", "data", "auto", 'dad','son','dadSon'],
        methods: {
            test(a, b, c, d) {
                console.warn(a, b, c, d);
            },
            selectEach(v) {
                // console.log(v);
                v._show = !v._show;
                this.$emit('select',this.selData);
            },
            selectAllCol(v) {
                this.selectAll = true;
                this.isShowMenu = false;
                this.inner_update = true;
                this.$refs.myColumnInput.blur();

                const data = this.data;

                if(this.lastIndex) {
                    const sel = this.selData = this.lastIndex;
                    data.forEach((v,i)=>{
                        v.show = v._show = sel.includes(i);
                    });
                    this.selectPart = sel.length < data.length;

                    this.$emit('ok',sel);
                    // this.auto && this.$parent[this.auto]();
                    return delete this.lastIndex;
                };
                const last = this.lastIndex = [];
                this.selData = mapArr( data,(v,i)=>(v.show && last.push(i),v.show=v._show=true,i) );
                this.selectPart = false;
                
                this.$emit('ok',this.selData);
                // this.auto && this.$parent[this.auto]();
            },
            showMenu() {
                if(this.isShowMenu) return this.$refs.myColumnInput.blur(),this.isShowMenu = false;
                this.$refs.myColumnInput.$el.click();
                this.isShowMenu = true;
            },
            close(bool) {
                // console.warn(this.inner_update);
                !bool 
                ? setTimeout(()=>this.isShowMenu=false, 50)
                : delete this.inner_update;
                if(this.inner_update) return delete this.inner_update;
                this.selData = mapArr(this.data,(v,i)=>{
                    if( v.show!==v._show ) v._show = v.show
                    else if(v.show) return i;
                });
                // console.log(this.selData);
            },
            ok() {
                const data = this.data;
                const sel = this.selData;

                data.forEach( v=>v.show = v._show );
                this.selectPart = sel.length < data.length;

                this.$emit('ok',sel);

                this.inner_update = true;
                this.$refs.myColumnInput.blur();

                // this.auto && this.$parent[this.auto]();
            }
        },
        created() {
            this.parseDadSon('myColumn');

            const data = this.data;
            const sel = this.selData = mapArr(data,(v,i)=>{
                if( !v.hasOwnProperty('show') ) return v._show = v.show = true, i;
                if( v.show !== true ) return v._show = false;
                return v._show = true, i;
            });

            this.selectPart = sel.length < data.length;
            // console.log(this.selData);
            return;
            // loadCSS('input.myColumnInput{max-height:0px}');
            // loadCSS('div.myColumn .el-input{max-height:' + (this.height || 32) + 'px;opacity:0;}');
            // loadCSS('div.myColumn .el-select__tags{display:none;}');
        },
        mounted() {
            var el = this.selectEl = $('#selectHeight'); //document.getElementById("selectHeight");
            // this.getViews();
            // View.call( this, el /*.add(el.find('*'))*/ );
            // console.error(this);
            $.resize( (W,H,e,window)=>{
                // console.error(w,h,e);
                const h = this.selectHeight;
                if( !h ) return;
                H *= 0.4;
                el.style.height = ( H > h ? h : H ) + "px";
            },'RESIZE' );
            /*$(window).resize( this.RESIZE = ()=>{
                if( !this.selectHeight ) return;
                var height = window.innerHeight * 0.4;
                el.height( height > this.selectHeight ? this.selectHeight : height )// + "px";
            } );*/
        },
        destroyed() {
            // $(window).unbind('resize',this.RESIZE);
            $.resize.remove('RESIZE');
        }
    }
</script>
<style>
    
    .myColumn{
        /*right:21px !important;*/
        position: relative;
        display: inline-block;
    }
    input#myColumnInput {
        max-height: 0px;
        margin-left: 9px;
    }
    .myColumn .el-input__inner{ opacity: 0; }
    .myColumn .el-input__suffix{ display: none; }
    .myColumn .el-select__tags{ display:none; }
    .myColumn .el-checkbox__inner { border-radius: 50%; }
    .myColumn .el-select-dropdown__wrap { max-height: 100% !important; }
    /* #myWindow .el-select-dropdown__wrap,#myWindow2 .el-select-dropdown__wrap {
        max-height: 274px !important;
    } */
    .el-select-dropdown.is-multiple {
        min-width: 120px !important;
    }
    p.el-select-dropdown__empty {
        opacity: 0;
    }

</style>